import React, { useCallback, useEffect, useState } from "react";
import { Menu, Button } from "antd";
import { withRouter } from "react-router-dom";
import "antd/dist/antd.css";
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from "@ant-design/icons";
import "./RouterLink.less"
const { SubMenu } = Menu;

function RouterLink(props) {
  const { router } = props;
  const [current, setCurrent] = useState(localStorage.getItem('current')||'1')
  const [collapsed, setCollapsed] = useState(false);
  const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  const [openKeys, setOpenKeys] = useState(['sub1']);
  const toggleCollapsed = useCallback(() => {
    setCollapsed(!collapsed);
    // console.log(1212);

  }, [collapsed]);

  const handleClick = useCallback((e) => {
    // console.log(e);

    // setCurrent(e.key);
    localStorage.setItem("current",JSON.stringify(e.keyPath[0]))
    goRouter(e.key);
    

  }, []);
  const onOpenChange = keys => {

    const latestOpenKey = keys.find(key => openKeys.indexOf(key) == -1);

    if (rootSubmenuKeys.indexOf(latestOpenKey) == -1) {

      setOpenKeys(keys);
    } else {

      setOpenKeys(keys);
    }
    
    
  };
  const goRouter = useCallback(
    (current) => {
      switch (current) {
        case '1':
          props.history.push('/Home/Statistics')
          break;
        case '2':
          props.history.push('/Student/School')
          break;
        case '3':
          props.history.push('/Student/Point')
          break;
        case '4':
          props.history.push('/Student/Score')
          break;
        case '5':
          props.history.push('/Student/Expense')
          break;
        case '6':
          props.history.push('/Student/Attendance')
          break;
        case '7':
          props.history.push('/Student/Graduate')
          break;
        case '8':
          props.history.push('/Dormitory/DormitoryManger')
          break;
        case '9':
          props.history.push('/Grade/upGrade')
          break;
        case '10':
          props.history.push('/Grade/GradeManger')
          break;
        case '11':
          props.history.push('/Grade/ClassRoom')
          break;
        case '12':
          props.history.push('/Administrator/Privilege')
          break;
        case '13':
          props.history.push('/Administrator/College')
          break;
        case '14':
          props.history.push('/Administrator/Employee')
          break;
        case '15':
          props.history.push('/Administrator/System')
          break;
      }
    }, []
  );
  useEffect(()=>{
    // console.log(222);

    goRouter(current);
    return () => {
      goRouter(current);
    };
  }, [])

  return (
    <div className="RouterLink">
      {/* <Button
        type="primary"
        onClick={toggleCollapsed}
        style={{ marginBottom: 16 }}
      >
        {React.createElement(
          collapsed ? MenuUnfoldOutlined : MenuFoldOutlined
        )}
      </Button> */}
      <Menu
        theme="dark"
        onClick={handleClick}
        style={{ width: 220 }}
        defaultOpenKeys={[]}
        mode="inline"
        inlineCollapsed={collapsed}
        onOpenChange={onOpenChange}
        openKeys={openKeys}
      >
        {
          router && router.map((item, index) => {
            if (item.parent) {
              return (
                <SubMenu key={`sub${item.nowIndex}`} title={item.title}>
                  {
                    item.children && item.children.map(ite => {
                      if (ite.title) {
                        return (
                          <Menu.Item key={ite.key} id={current === ite.key ? 'active' : ''}>{ite.title}</Menu.Item>
                        )
                      }

                    })
                  }
                </SubMenu>
              )
            }
          })
        }
      </Menu>
    </div>
  );
}
export default withRouter(RouterLink);


